<!--
* @author wn
* @date 2022/09/05 14:54:46
* @description: 主页面板
* 标题 子标题 -- props
* 右侧具名插槽 下面 默认插槽
!-->
<template>
	<div class="home-panel">
		<!-- 头部 -->
		<div class="head">
			<h4>{{ title }}</h4>
			<xtx-more />
		</div>
		<!-- 面板内容 商品列表 传递 v-for 商品-->
		<div class="goods-list">
			<slot></slot>
		</div>
	</div>
</template>
<script>
export default {
	name: 'HomePanel',
	props: {
		// 标题
		title: {
			type: String,
			default: '',
		},
	},
}
</script>
<style scoped lang="less">
.home-panel {
	background-color: #fff;
	margin-top: 20px;
	.head {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		height: 66px;
		border-bottom: 1px solid #f5f5f5;
		padding: 18px 20px;
		h4 {
			font-size: 22px;
			font-weight: 500;
		}
	}
	.goods-list {
		display: flex;
		justify-content: space-around;
		padding-top: 20px;
	}
}
</style>
